<template lang="html">
  <div class="ser_con" :class="{ 'flagk-active': flag}">
					    <a href="#">
						<p class="ser_input">
							<input type="text" @click.prevent="toPage()" placeholder="搜索目的地国家/城市/关键词" class="ban_inpcs" id="list-search-form1">
						</p>
						</a>
						<!---->
						<p class="city"><strong><img src="http://m.caissa.com.cn/static/images/location.png"></strong>
							<span id="cityname">{{loction}}</span>
						</p>
					</div>
</template>

<script>
import bus from '../js/bus'
export default {
  data(){
    return{
      flag:false,
      scroll:'',
      loction:'未定位'
    }
  },
  methods: {
     menu() {
       console.log('adadad');
      this.scroll = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
      console.log(this.scroll);
      if (this.scroll > window.screen.availHeight/3) {
        this.flag = true
      }else {
        this.flag = false
      }
    },
    toPage(){
      this.$router.push({
        path:'/searchyemian'
      })
    }
  },
  created(){
    let this_=this;
    console.log('11');
    // console.log(this);
    var map, geolocation;
        //加载地图，调用浏览器定位服务
        map = new AMap.Map('container', {
            resizeEnable: true
        });
        map.plugin('AMap.Geolocation', function() {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: false,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                buttonPosition:'RB'
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
            AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        });
        //解析定位结果
        function onComplete(data) {
            var str=['定位成功'];
           //  str.push('经度：' + data.position.getLng());
           //  str.push('纬度：' + data.position.getLat());
           //  if(data.accuracy){
           //       str.push('精度：' + data.accuracy + ' 米');
           //  }//如为IP精确定位结果则没有精度信息
           //  str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
           //  this.loction = str.join('<br>');
          //  this_.loction = data.position.getLng()
            var geocoder;
            AMap.service('AMap.Geocoder',function(){//回调函数
                //实例化Geocoder
                geocoder = new AMap.Geocoder({
                    city: "010"//城市，默认：“全国”
                });
                //TODO: 使用geocoder 对象完成相关功能
            })
            //逆地理编码
            var lnglatXY=[data.position.getLng(), data.position.getLat()];//地图上所标点的坐标
            geocoder.getAddress(lnglatXY, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                   //获得了有效的地址信息:
                   //即，result.regeocode.formattedAddress
                   console.log(result);
                   this_.loction = result.regeocode.addressComponent.province;
                }else{
                   //获取地址失败
                   this_.loction = "定位失败";
                }
            });
        }
        //解析定位错误信息
        function onError(data) {
            this_.loction = '定位失败';
            console.log(data);
        }
        bus.$on('flagby',data=>{
            console.log(data);
            this.flag = data
          })
  },
  watch:{
    'flag'(newva,oldva){
      console.log("daddsda"+newva);
    }
  },
  mounted() {
  //  window.addEventListener('scroll', this.menu)
  },
}
</script>

<style lang="css" scoped>
.flagk-active{
  background-color: #00b0ec;
}
.ser_con {
    position: fixed;
    padding: 3% 3% 2%;
    width: 100%;
    overflow: hidden;
    z-index: 99;
}
.ser_con p.ser_input {
    display: block;
    width: 80%;
    height: 32px;
    line-height: 32px;
    background: #fff;
    filter: alpha(opacity=70);
    -moz-opacity: 0.70;
    opacity: 0.70;
    border: none;
    border-radius: 5px;
    float: left;
}
.ser_con p.ser_input input {
    background: url(../../static/images/ser.png) 8px 7px no-repeat;
    padding-left: 12%;
    color: #999;
    font-size: 12px;
    background-size: 16px;
    height: 32px;
    line-height: 32px;
    width: 88%;
    float: left;
    padding-right: 2px;
    outline: none;
    border: none;
}
.ser_con p.city {
    display: block;
    width: 20%;
    text-align: center;
    float: left;
}
.ser_con p.city strong {
    display: inline-block;
    width: 14px;
    height: 16px;
    text-align: center;
}
.city img{
  border: none;
  vertical-align: middle;
  width: 100%;
}
.ser_con p.city span {
    display: block;
    color: #fff;
    font-size: 12px;
    text-align: center;
}
#cityname{
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;

}
</style>
